<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>CSS基础示例</h1>
        
        <h2>选择器示例</h2>
        <p>这是一个段落，展示了基本的元素选择器样式。</p>
        <p>这个段落紧跟在h2后面，使用了相邻兄弟选择器。</p>
        
        <div class="box">
            这是一个使用类选择器样式的盒子。
        </div>
        
        <div class="box highlight">
            这是一个使用多个类选择器样式的盒子。
        </div>
        
        <div id="special-note">
            这是使用ID选择器样式的特殊提示框。
        </div>
        
        <h2>颜色示例</h2>
        <div class="color-examples">
            <div class="color-box color-1">关键字<br>red</div>
            <div class="color-box color-2">RGB<br>rgb(0,128,0)</div>
            <div class="color-box color-3">十六进制<br>#0000FF</div>
            <div class="color-box color-4">HSL<br>hsl(300,100%,50%)</div>
            <div class="color-box color-5">RGBA<br>rgba(0,0,0,0.5)</div>
        </div>
        
        <h2>盒模型示例</h2>
        <p>查看开发者工具来观察不同元素的盒模型属性：</p>
        <ul>
            <li>content - 内容区域</li>
            <li>padding - 内边距</li>
            <li>border - 边框</li>
            <li>margin - 外边距</li>
        </ul>
        
        <p>你可以尝试修改 styles.css 文件中的样式来观察变化。</p>
    </div>
</body>
</html>
